<template>
    <div class="pingjia-page" v-if="this.orderListData">
        <div class="pingjia-img">
            <img :src="this.orderListData[this.index].cmSp.spIconUrl" alt="">
            <h3>{{orderListData[this.index].cmSp.spName}}</h3>
        </div>
        <p v-if="this.orderListData[this.index].evaluateStatus === 0" class="pingjia-problem">您对这次服务满意吗？</p>
        <p v-else class="pingjia-problem">您对此次服务的评价</p>
        <div v-if="this.orderListData[this.index].evaluateStatus === 0" class="pingjia-star">
            <div class="block">
                <el-rate v-model="value"></el-rate>
            </div>
        </div>
        <div v-else class="pingjia-star">
            <div class="block">
                <el-rate disabled v-model="rateData.grade"></el-rate>
            </div>
        </div>
        <br><br><br><br><br>

        <div v-if="this.orderListData[this.index].evaluateStatus === 0" class="pingjia-btn">
            <a @click="pjurl()">立即评价</a>
        </div>
        <div v-else class="pingjia-btn">
            <a @click="goBack">返回</a>
        </div>
    </div>
</template>

<script>
import {mapState,mapActions} from 'vuex'
export default {
    created(){
        if(this.orderListData && (this.orderListData[this.index].evaluateStatus === 1)){
            this.getRateData({evaluateId:this.orderListData[this.index].evaluateId});
        }
    },
    data(){
        return {
            index:this.$route.query.orderIndex,
            value:0
        }
    },
    computed:{
        ...mapState({
            orderListData: state => state.personModules.orderListData,
            rateData:state => state.personModules.rateData
        })
    },
    methods:{
        ...mapActions({
            getRateData:'personModules/getRateData',
            insertRate:'personModules/insertRate'
        }),
        pjurl() {
            let params = {
                orderNumber :this.orderListData[this.index].orderNumber,
                grade:this.value,
            }
            this.insertRate(params);
        },
        goBack(){
            this.$router.go(-1);
        }
        
    }
}
</script>


<style lang="scss" scoped>
@import "../../assets/style/order.scss";
</style>
